<template>
    <div :class="itemClass" @click="changeSelected" :style="isSelected ? standAndTasteSelectColor : ''">{{itemName}}</div>
</template>

<script>
import ModeMixin from '@common/mixin';
export default {
    name: 'ChooseItem', // 规格项
    mixins: [ModeMixin],
    props: {
        itemName: {
            type: String,
            default: '',
        },
        isSelected: {
            type: Boolean,
            default: false,
        },
        isDisable: {
            type: Boolean,
            default: false,
        },
        showDiscount: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        itemClass() {
            const { isSelected, mode, styleMode, isDisable } = this.$props;
            return `choose-item ${isSelected ? 'selected' : ''} ${isDisable ? 'disabled' : ''} ${mode} ${styleMode}`;
        },
    },
    methods: {
        changeSelected() {
            const { itemName, isDisable } = this.$props;
            if (isDisable) {
                return;
            }
            this.$emit('select', itemName);
        },
    },
};
</script>

<style lang="less">
.choose-item {
    width: 30%;
    min-height: 37px;
    float: left;
    margin: @gap 0 0 5%;
    box-sizing: border-box;
    color: @gray-888;
    position: relative;
    // background: rgba(125,125,131,0.1);
    border:1px solid rgba(125,125,131,0.2);
    font-family: @font-family-number;
    .font-size();
    .flex-center();
    text-align: center;
    overflow: hidden;
    &.circle {
        border-radius: 6px;
    }
    &:nth-child(3n+1) {
        .m-l(0);
    }
    &.selected {
        font-weight: @font-weight-bold;
    }
    &.disabled {
        background:rgba(125,125,131,0.08);
        border: none;
        color: rgba(125,125,131,0.29);
    }
    .have-discount {
        position: absolute;
        left: 0;
        top: 0;
        height: 16px;
        width: 16px;
        line-height: 16px;
        display: block;
        background-color: #FE3B30;
        font-size: @font-size-mini;
        // border-top-left-radius: 6px;
        border-bottom-right-radius: 6px;
        color: @white;
    }
}
</style>
